// 第三方管理
<template>
  <div>
    <el-container class="guanglicontainer">
      <el-header class="hedaer-">
        <el-row class="mianbaoxie">
          <div class="mianbaoxie">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              class="mianbaoxie"
            >
              <el-breadcrumb-item :to="{ path: '/thi' }"
                >第三方管理</el-breadcrumb-item
              >
              <el-breadcrumb-item>保险公司管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-row>
      </el-header>
      <el-main class="main1">
        <el-row>
          <div class="clearable2">
            <div class="clearable1">
              <el-button type="primary" @click="onSubmit" class="el-icon-plus"
                >添加保险公司</el-button
              >
            </div>
            <div class="clearable">
              <el-input
                placeholder="请输入内容"
                v-model="input"
                clearable
                class="shuruk"
              >
              </el-input
              ><el-button type="primary" icon="el-icon-search" @click="chaxun"
                >搜索</el-button
              >
            </div>
          </div>

          <table class="thad">
            <thead>
              <tr>
                <th>编号</th>
                <th>公司名称</th>
                <th>公司短民</th>
                <th>公司报案电话</th>
                <th>是否支持垫付</th>
                <th>地址</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in nowtableaut" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.shortName }}</td>
                <td>{{ item.emergencyPhone }}</td>
                <td>{{ item.pay }}</td>
                <td>{{ item.address }}</td>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="xiugai(item)"
                ></el-button>

                <el-button
                 type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="shanchu(item.id)"
                ></el-button>
                <el-dialog title="修改" :visible.sync="dialogFormVisible">
                  <el-form :model="form">
                    <el-form-item
                      label="公司名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.companyName"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="公司短名"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.shortName"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="公司报案电话"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.emergencyPhone"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      label="是否支付垫付"
                      :label-width="formLabelWidth"
                    >
                      <el-radio v-model="form.pay" label=true>是</el-radio>
                      <el-radio v-model="form.pay" label=false>否</el-radio>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                      <el-input
                        v-model="form.address"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="duxiao">取 消</el-button>
                    <el-button type="primary" @click="qudingxiugai(form)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </tr>
            </tbody>
          </table>

          <el-col :span="8" :offset="8">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10,20]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="nuerlist.length"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 1, //当前显示第几页
      pagesize: 6, //一页显示6条
      input: "", //搜索查询的输入框
      nuerlist: [
        {
          id: 1,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 2,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 3,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 4,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 5,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 6,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 7,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 8,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 9,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 10,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 11,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 12,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 13,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 14,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 15,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 16,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 17,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
        {
          id: 18,
          name: "创世达公司",
          namedm: "创世达",
          tel: 1234567,
          saubut: "是",
          dizhi: "成都市武汉区",
        },
      ],

      // motankuang
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 修改的模态框变量
      form: {
        companyName: "",
        pay: true,
        shortName: "",
        emergencyPhone: "",
        address: "",
        delivery: false,
        type: [],
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.nuerlist = [];
    this.$axios({
      url: "/insuranceCompanyManagement/list",
      method: "post",
    }).then((res) => {
      if (res.data.code == 0) {
        this.nuerlist = res.data.data;
        this.nuerlist.forEach((item) => {
          if (item.pay == true) {
            item.pay = "是";
          } else {
            item.pay = "否";
          }
        });
      }
    });
  },
  methods: {
    // 查询
    chaxun() {
      this.$axios({
        url: "/insuranceCompanyManagement/list",
        method: "post",

        params: {
          name: String(this.input),
          limit: this.pagesize,
          page: this.currentPage4,
        },
      }).then((res) => {
        this.nuerlist = [];
        this.nuerlist = res.data.data;
      });
    },
    onSubmit() {
      this.$router.push("/home/thi");
    },
    handleSizeChange(currentPage1) {
      this.pagesize = currentPage1;
      console.log(`每页 ${currentPage1} 条`);
    },
    handleCurrentChange(currentPage4) {
      this.currentPage4 = currentPage4;
      console.log(`当前页: ${currentPage4}`);
    },
    // 修改的模态框
    xiugai(item) {
      this.dialogFormVisible = true;
      this.form = item;
    },
    // 确定修改
    qudingxiugai(item) {
      console.log( String(item.emergencyPhone) ,item.pay);
      console.log(item.pay);
      console.log(Number(item.id));
      console.log(Boolean( item.pay));
      this.$axios({
        url: "/insuranceCompanyManagement/update",
        method: "post",
        params : {
          id: Number(item.id),
          companyName: item.companyName,
          shortName:item.shortName,
          emergencyPhone: String(item.emergencyPhone) ,
          pay: Boolean(item.pay),
          address: item.address,
        },
      }).then(res=>{
        console.log(res);
        if(res.data.code==0){
this.dialogFormVisible = false;
        }
      })
    },
    // 取消修改
    duxiao() {
      this.dialogFormVisible = false;
    },
    // 删除
    shanchu(val) {
      console.log(val);
      this.nuerlist.splice(val, 1);
      this.$axios({
        url: "/insuranceCompanyManagement/delete",
        method: "post",
        params: { id: val },
      }).then((res) => {
        if(res.data.code==0){
                alert("删除成功");
                this.$router.push("/home/thi1/baoxian")
        }
        
      
        
      });
    },
  },
  computed: {
    nowtableaut() {
      return (
        this.nuerlist.slice(
          (this.currentPage4 - 1) * this.pagesize,
          this.currentPage4 * this.pagesize
        ) || []
      );
    },
  },
};
</script>

<style lang="less" scoped>
.fenye {
  float: left;
  text-align: center;
}
.thad {
  width: 100%;
  text-align: center;
  line-height: 50px;
}
.el-icon-plus {
  margin: 20;
}
.mianbaoxie {
  /* margin-top: 20px; */
  height: 60px !important;
  line-height: 60px !important;
  border-bottom: 1px solid #425877;
  /* background-color: rgb(199, 173, 173); */
  font-size: 20px;
}
.addinsurance {
  margin-bottom: 30px;
  float: left;
  height: 80px;
  line-height: 80px;
}
.clearable {
  float: left;
  width: 400px;
  margin-left: 100px;
}
.clearable1 {
  float: left;
  width: 10%;
  margin-left: 10px;
}
.clearable2 {
  float: left;
  width: 35%;
  height: 80px;
  border: 1px solid rgba(128, 127, 127, 0.144);
  line-height: 80px;
  margin-bottom: 30px;
}
.shuruk {
  width: 200px;
  margin-right: 20px;
}
</style>